<template>
  <el-image
      style="width: 100px; height: 100px"
      :src="imgurl"
      :preview-src-list="srcList">
  </el-image>
</template>
<script>

import {GetImge} from "@/request/utils/file";

export default {
  name: "AuthImg",
  props: {
    authSrc: ""
  },
  computed: {
    // 使用computed属性来保证prop的响应式
    computedProp() {
      return this.$props.authSrc;
    }
  },
  watch: {
    // 监控computedProp的变化，当prop变化时，会触发这个watcher
    computedProp(newVal, oldVal) {
      this.imgurl = ""
      console.log("chufa1")
      // 当computedProp变化时，组件会自动重新渲染
      if( this.$props.authSrc!==null&&this.$props.authSrc!==""&&this.$props.authSrc.length>5){
        let imgurll =  this.$props.authSrc.split("/")
        GetImge(imgurll[imgurll.length-1]).then(res=>{
          var reader = new FileReader();
          reader.readAsDataURL(res); // 一定要传入file格式
          reader.onload = () => {
            this.imgurl = reader.result
            this.srcList = []
            this.srcList .push(this.imgurl)
          };
        })
      }
    }
  },
  data() {
    return {
      imgurl: "",
      srcList: [
      ]
    }
  },
  mounted () {
    if( this.$props.authSrc!==null&&this.$props.authSrc!==""&&this.$props.authSrc.length>5){
      let imgurll =  this.$props.authSrc.split("/")
      GetImge(imgurll[imgurll.length-1]).then(res=>{
        var reader = new FileReader();
        reader.readAsDataURL(res); // 一定要传入file格式
        reader.onload = () => {
          this.imgurl = reader.result
          this.srcList = []
          this.srcList .push(this.imgurl)
        };
      })
    }
  }
}
</script>